<template>
  <div class="addCamera">
    <el-button v-if="showBtn" @click="handleClick" v-bind="$attrs">
      <slot>新增</slot>
    </el-button>
    <el-dialog class="d1" :title="title" :visible.sync="visible" append-to-body width="500px" @close="onClose">
      <el-form :model="form" ref="form" v-loading="loading" class="form rules" :rules="rules" label-width="140px" size="mini">
        <el-form-item label="点位名称：" prop="pointName">
          <el-input v-model.trim="form.pointName" size="small" placeholder="请输入点位名称"></el-input>
        </el-form-item>
        <el-form-item label="经度：" prop="lon">
          <el-input v-model.trim="form.lon" size="small" placeholder="请输入点位经度"></el-input>
        </el-form-item>
        <el-form-item label="纬度：" prop="lat">
          <el-input v-model.trim="form.lat" size="small" placeholder="请输入点位纬度"></el-input>
        </el-form-item>

        <el-form-item label="高程：" prop="altitude">
          <el-input v-model.trim="form.altitude" size="small" placeholder="请输入点位高程"></el-input>
        </el-form-item>
        <div class="align-r">
          <el-button size="small" @click="handleQuit">取 消</el-button>
          <el-button size="small" type="primary" @click="handleSubmit">确 定</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import { checkPointName } from "@/api/slope/point";
  // import * as THREE from "@/components/THREE_JS/three";
  export default {
    components: {},
    props: {
      showBtn: {
        type: Boolean,
        default: false
      }
    },
    data() {
      let latReg = /^(\-|\+)?([0-8]?\d{1}\.\d+|90\.0{0,6}|[0-8]?\d{1}|90)$/;;
      let checkLat = (rule, value, callback) => {
        if (!latReg.test(value)) {
          return callback(new Error('纬度输入不正确'))
        } else {
          callback()
        }
      }

      let lonReg = /^(\-|\+)?(((\d|[1-9]\d|1[0-7]\d|0{1,3})\.\d+)|(\d|[1-9]\d|1[0-7]\d|0{1,3})|180\.0{0,6}|180)$/;
      let checkLon = (rule, value, callback) => {
        if (!lonReg.test(value)) {
          return callback(new Error('经度输入不正确'))
        } else {
          callback()
        }
      }

      return {
        loading: false,
        visible: false,
        title: "",
        defaultForm: {
          pointName: "",
          lat: "22.936135",
          lon: "108.378179",
          altitude: "0.0",
          isValid: "0",
          repairTimes: "0",
        },
        form: {
          pointName: "",
          lat: "",
          lon: "",
          altitude: ""
        },
        rules: {
          pointName: [{
            required: true,
            message: "名称不能为空"
          }, {
            validator: (rule, value, callback) => {
              if(this.name!=value){
                checkPointName(value).then(res => {
                  if (res.data.length > 0) {
                    callback('名称已经存在')
                  } else {
                    callback()
                  }
                })
              }else{
                callback()
              }

            },
            trigger: 'blur'
          }],
          lon: [{
            required: true,
            message: "经度不能为空",
          }, {
            validator: checkLon,
          }],
          lat: [{
            required: true,
            message: "纬度不能为空",
          }, {
            validator: checkLat,
          }],
          altitude: {
            required: true,
            message: "高程不能为空"
          }
        }
      };
    },
    methods: {
      handleQuit(){
        var id =  this.form.pointId;
        console.log("dragAfter:"+[this.form.lon,this.form.lat]);
        for(var i = 0 ;i<this.$parent.pointList.length;i++){
          var point = this.$parent.pointList[i];
          if(point.pointId==id) {
            if(this.$parent.dragBeforePoint!=null) {
              point.lon = this.$parent.dragBeforePoint[0];
              point.lat = this.$parent.dragBeforePoint[1];
              point.poposition = this.$parent.dragBeforePoint;
            }
            this.$parent.dragBeforePoint = null;
            break;
          }
        }
        this.visible=false;
      },
      onClose() {},
      handleAreachange(s) {
        console.log(s);
      },
      async handleClick({ info, title, submit }) {
        this.form = { ...this.defaultForm,
          ...info
        } || { ...this.defaultForm
        };
        if(this.form.pointName !=null || this.form.pointName !=undefined){
          this.name = this.form.pointName
        }
        this.title = title || "";
        this.submit = submit || (() => {});
        this.visible = true;
        await this.$nextTick();
        this.$refs["form"].clearValidate();
      },
      async handleSubmit(data) {
        // let from = this.form;
        // let a = new THREE.Vector3(from.lon, from.lat, from.altitude);
        // console.log(a);
        this.$refs["form"].validate(async valid => {
          if (valid) {
            this.loading = true;
            let res = await this.submit(this.form);
            if (res) {
              this.visible = false;
              this.$emit("refresh");
              this.$parent.dragBeforePoint = null;
            }
            this.loading = false;
          }
        });
      },
    }
  };
</script>
